<template>
	<div class="test">
		<div class="block-test block-border">
			<h1>中英文</h1>
			<br />
			<span class="text">{{ $t('hello') }}</span>
			<span class="text">{{ $t('test1.text') }}</span>
			<a-select v-model:value="locale" @change="localeChange">
				<a-select-option value="zh">中文</a-select-option>
				<a-select-option value="en">英文</a-select-option>
			</a-select>
		</div>
		<div class="block-test block-border">
			<h1>接口对接</h1>
			<br />
			<!-- 代码块 -->
			<pre>
				<code>
					引用：
					import API from '@/api'
					const common = API.common
					<!-- 调用 -->
					common.upload().then(res => {
						console.log(res)
					})
				</code>
			</pre>
		</div>
	</div>
</template>

<script>
import API from '@/api'
const common = API.common
export default {
	data() {
		return {}
	},
	computed: {
		locale: {
			get() {
				return this.$store.state.app.lang
			},
			set(val) {
				this.$store.dispatch('app/setLang', val)
			},
		},
	},
	methods: {
		localeChange(val) {
			this.$store.dispatch('app/setLang', val)
			// 切换语言后，重新加载页面
			window.location.reload()
		},
		getCommonData() {
			common.upload().then(res => {
				console.log(res)
			})
		},
	},
	mounted() {
		this.getCommonData()
	},
}
</script>

<style lang="less" scoped>
.test {
	.block-test {
		width: 100%;
		padding: 0 20px;
		.text {
			margin-right: 20px;
		}
	}
}

.block-border {
	border: 1px solid #e8e8e8;
	min-height: 200px;
	margin-bottom: 20px;
}
</style>
